<template>
    <div class="container-fluid" style="background: rgb(244, 244, 244);">
        <div class="nav-news">
            <div class="title">
                <div class="active">实时新闻</div>
                <div>Real-time News</div>
            </div>
        </div>
        <div class="container" style="margin-top: 30px;">
            <router-link :to="`/newsdetail?id=${item.id}`" class="list-box col-md-12 col-xs-12 col-sm-12" v-for="(item, index) in lists" :key="index">
                <div class="news-cover">
                    <img :src="item.thumb" alt="">
                </div>
                <div class="detail">
                    <div class="title">{{item.title}}</div>
                    <div class="info">{{item.description}}</div>
                    <div class="article-time">发布时间：{{item.inputtime}}</div>
                </div>
            </router-link>
        </div>
        <div class="container">
            <el-pagination
                class="new-pagination"
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="page"
                :page-size="size"
                layout="prev, pager, next"
                :total="total" background>
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getNewsList } from '@/api'
export default {
    data() {
        return {
            page: 1,
            size: 5,
            total: 0,
            lists: []
        }
    },
    methods: {
        sizeChange(val) {
            this.size = val
            this.getList()
        },
        currentChange(val) {
            this.page = val
            this.getList()
        },
        getList(init) {
            if (init) {
                this.page = 1
            }
            let params = {
                page: this.page,
                size: this.size
            }
            this.loading = true
            getNewsList(params).then(res => {
                if (res.code == 1) {
                    this.total = res.data.page.total
                    this.lists = res.data.lists
                }
            }).finally(() => {
                this.loading = false
            })
        }
    },
    mounted() {
        this.getList(true)
    }
}
</script>
